<?php
	session_start();
	$shopInfo = array();
	if ($_SESSION['shopid'] != 0) {
		$shopid = $_SESSION['shopid'];
		require_once(Models_DIR.'page_model.php');
		$page_model = new Page_Model();

		$shopInfo = $page_model->showModInfo($shopid);
		$shopTableType = $page_model->getShopTableType($shopid);
		$tableName = array(2 => "Two-Seater", 4 => "Four-Seater", 6 => "Six-Seater", 8 => "Eight-Seater");
		$tableNameid = array(2 => "twoSeater", 4 => "fourSeater", 6 => "sixSeater", 8 => "eightSeater");
		if($shopTableType != FALSE) {
			$html = '<div class="row-fluid">';

			$length = count($shopTableType);
			$span = 'span' . (string)(12 / $length);
			for($i = 0; $i < $length; $i++) {
				$html .= '<div class="'.$span.' well table " id="'.$tableNameid[$shopTableType[$i]].'">
							<p style="margin-top:-20px">'.$tableName[$shopTableType[$i]].'</p>
						</div>';
			}
			$html .= '</div>';
$html .= <<<code
		<div class="row-fluid">
			<div class="span6 well" id="queue">
				<p style="margin-top:-20px">Queue</p>
			</div>
			<div class="span6 well" id="notCheck">
				<p style="margin-top:-20px">NotCheck</p>
			</div>
		</div>
		<!--template -->
		<div class="template">
			<div class="template-btn">
				<button class="btn btn-warning clientNotify-btn">通知</button>
				<button class="btn btn-primary clientCheckIn-btn">確認到店</button>
				<button class="btn btn-info clientInfo-btn">客戶資料</button>
				<button class="btn btn-danger delClient-btn">刪除</button>
				<button class="btn btn-danger finishedEating-btn">結束用餐</button>
			</div>
			<span class="template-item item clearfix"></span>

		</div>
		<script>
			// 刪除客戶資料
			$('.delClient-btn').on('click', function(e) {
				if(confirm("確定要刪除？")) {
					var id = $(this).closest('span.item').data('clientid');
					delClient(id, function(response) {
						if(response.result == "success") {
							$(e.target).closest('span.item').remove();
						}else {
							console.log(response.message);
						}
					});
				};
			});
			// 客戶到店
			$('.clientCheckIn-btn').on('click', function() {
				$(this).closest('span.item')
				.draggable('enable')
				.draggable('option', 'scope', 'rule2');

				/*
				var id = $(this).closest('span.item').data('clientid');
				clientCheckIn(id, function(response) {
					if(response.result == "success") {
						$(e.target).closest('span.item').draggable('option', 'scope', 'rule2');
					}
				});
				*/
			});
			// 通知客戶到店
			$('.clientNotify-btn').on('click', function() {
				var id = $(this).closest('span.item').data('clientid');
				clientNotify(id, function(response) {
					if(response.result == "success") {
						//alert success message
						//return true;
					}else {
						console.log(response.message);
						// alert fail message
						//return false;
					}
				});				
			});
			// 結束用餐
			$('.finishedEating-btn').on('click', function() {
				var item = $(this).closest('span.item');
				var id = $(this).closest('span.item').data('clientid');
				finishedEating(id, function(response) {
					if(response.result == "success") {
						$(item).remove();
						//alert success message
						//return true;
					}else {
						console.log(response.message);
						// alert fail message
						//return false;
					}					
				});
			});
			// 顯示客戶資料
			$('clientInfo-btn').on('click', function() {

			});	
		
			// initialize page
			var type = {queue: -1, notCheck: 0, twoSeater: 2, fourSeater: 4, sixSeater: 6, eightSeater: 8};
			$.each(type, function(key, value) {
				getClient(value).done(function(json) {
					if(!json) return false;
					$.each(json, function() {						
						var client = $('<span>').addClass('item clearfix')
							   .text(this.clientname + "先生 " + this.orderofnum + "人")
							   .data("clientid", this.clientid);
						if(value <= 0) {
							$(client).draggable({
								delay: 300, 
								helper: 'clone',
								revert: "invalid",
								cursorAt: {top: 20, left: 160},
								drag: function(event, ui) {
									$(ui.helper).width("321px");
								}
							});
						};
						switch(key){
							case 'twoSeater':
							case 'fourSeater':
							case 'eightSeater':
								$(client).append($('div.template-btn .finishedEating-btn').clone(true));
								break;
							case 'queue':
								$(client).draggable('option', 'scope', "rule1");
								$(client).append($('div.template-btn .delClient-btn').clone(true));

								//$(client).append($('div.template-btn .clientNotify-btn').clone(true));
								break;
							case 'notCheck':
								//$(client).draggable('option', 'scope', "rule2");
								$(client).draggable('disable');
								$(client).append($('div.template-btn .delClient-btn').clone(true));
								$(client).append($('div.template-btn .clientNotify-btn').clone(true));
								$(client).append($('div.template-btn .clientCheckIn-btn').clone(true));
								break;
						};					
						//$(client).append($('div.template-btn .clientInfo-btn').clone(true));
	   
						$(client).addClass('item-' + key).appendTo('#' + key);
					});
				});
			});
			

			$('#notCheck').droppable({ 
				scope: "rule1", /* rule1 : Queue -> notCheck */
				tolerance: "pointer",
				drop: function(event,ui) {
					var id = $(ui.draggable).closest('span.item').data('clientid');
					clientCheckIn(id, function(response) {
						if(response.result == "success") {
							$(ui.draggable).removeClass('item-queue').addClass('item-notCheck')
							.append($('div.template-btn .clientNotify-btn').clone(true))
							.append($('div.template-btn .clientCheckIn-btn').clone(true))	
							.draggable('disable')
							.appendTo(event.target)

							//$(ui.draggable).closest('span.item').draggable('option', 'scope', 'rule2');
						}
					})
				},
						 	
			});

			$('.table').droppable({
				scope: "rule2", /* rule2: notCheck -> Seater */
				tolerance: "pointer",
				drop: function(event, ui) {

					//return false;
					// back
					var id = $(ui.draggable).closest('span.item').data('clientid');
					var tabletype = type[this.id]; 
					assignTable(id, tabletype, function(response) {
						if(response.result == "success") {
							//return true;
							//alert success message
							// front
							$(ui.draggable).removeClass('item-notCheck').addClass('item-' + event.target.id)
							.draggable('disable')
							.appendTo(event.target)
							.children().remove('button.clientNotify-btn')
							.remove('button.clientCheckIn-btn');

							
						}else {
							console.log(response.message);
							// alert fail message
							return false;
						}						
					});
					
					/*
					$('.template-item').clone(true).removeClass('template-item').addClass('item-' + this.id)
					.html($(ui.draggable).html()).data("clientid", $(ui.draggable).data("clientid"))
					.appendTo(this);
					*/
					//$(ui.draggable).clone(true).appendTo('#eightSeater');
					//$(ui.draggable).remove();
					//$(event.target).draggable('disable');
					

					},
				over: function(event, ui) {
					/*
					console.log(event.target.tagName + ": " + $(event.target).width() + 
								"padding-left: " + $(info.helper).get(0).style.paddingLeft +
								"padding-right: " + $(event.target).css("padding-right")
					);
					*/
                    $(ui.helper).width($(event.target).width() - 8);
				}
			});
/*
			$('.item').hover(function() {
				$(this).children('button').show();
			}, function() {
				$(this).children('button').hide();
			});
*/
		</script> 

code;
	echo $html;

		}else {

		}
		
	}
?>